<template>
    <div class="doctorAuditingList">
        <page-title>审核列表</page-title>
        <div class="content-box">
          <div class="filter-box">
              <el-row>
                <el-col :span="7">
                    <span class="item-name">输入姓名:</span>
                    <el-input placeholder="申请人名字"></el-input>
                </el-col>
                <el-col :span="7">
                    <span class="item-name">排序方式:</span>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary">查询结果</el-button>
                </el-col>
              </el-row>
          </div>
          <el-table
              :data="dataList"
              border
              style="width: 100%">
              <el-table-column
                type="selection"
                align="center"
                width="70">
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="医生姓名">
              </el-table-column>
              <el-table-column
                prop="sex"
                align="center"
                label="医生性别">
              </el-table-column>
              <el-table-column
                prop="age"
                align="center"
                label="医生年龄">
              </el-table-column>
              <el-table-column
                align="center"
                label="凭证">
                <template slot-scope="scope">
                    <div class="doctorimg" :style="'background-image:url('+scope.row.certificate+')'"></div>
                </template>
              </el-table-column>
              <el-table-column 
                label="操作" 
                align="center"
                width="200"
                show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button 
                        	type="text" 
                        	size="small"
                        	@click="$router.push({name: 'doctorAuditing'})">查看</el-button>
                        <el-button type="text" size="small">通过</el-button>
                        <el-button type="text" size="small">驳回</el-button>
                    </template>
              </el-table-column>
          </el-table>
          <div class="footer-box">
              <el-row>
                  <el-col :span="6">
                      <div class="multiple-box">
                          <el-checkbox >全选</el-checkbox>
                          <el-select v-model="value2" placeholder="请选择">
                              <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                          </el-select>
                          <el-button style="margin-left: 20px;" >确定</el-button>
                      </div>
                  </el-col>
                  <el-col :span="18">
                      <div class="pagination-box">
                          <el-pagination
                              layout="prev, pager, next"
                              :total="50">
                          </el-pagination>
                      </div>
                  </el-col>
              </el-row>
          </div>
            
        </div>
    </div>
</template>
<script>
import * as api from '../../api/api'
import TopTitle from "./components/Top-Title"
export default {
    name: 'doctorAuditingList',
    data () {
        return {
            options: [
                {value: '0',label: '按时间顺序排序'}, 
                {value: '1',label: '按时间倒叙排序'}
            ],
            value: '0',
            options2: [
                {value: '0',label: '批量删除'}, 
                {value: '1',label: '批量导出'}, 
                {value: '2',label: '批量查阅'}
            ],
            value2: '0',
            date: '',
            dataList: []
        }
    },
    created() { 
        var that = this;
        that.dataList = [
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
            {name: '扁鹊刘', sex: '男', age: '36', certificate: '../../../static/img/doctor.jpg'},
        ]
    },
    methods: {
        
    },
    components: {
        TopTitle
    }
}
</script>
<style>
    .filter-box input.el-input__inner, .filter-box .el-input{
        width: 170px;
    }
    .multiple-box input.el-input__inner, .multiple-box .el-input {
        width: 120px;
        margin-left: 10px;
    }
    .doctorAuditingList .el-tabs__header {
        margin: 0;
    }
</style>
<style scoped lang="scss">
    .doctorAuditingList {
        background: #ffffff;
        height: 100%;
        position: relative;
        box-sizing:border-box;
        color: #666666;
        font-size: 14px;
        .content-box {
            padding: 20px;
            padding-bottom: 70px;
            .filter-box {
                padding: 30px 0;
                border: 1px solid #e4e7ed;
                border-bottom: 0;
                .item-name {
                    padding-left: 30px;
                    padding-right: 10px;
                }
            }
            .operate{
                width:100%;
                height: 100%;
                text-align: center;
                span {
                    color: #1ABC9C;
                    margin: 0 5px;
                }
            }
            .footer-box {
                height: 50px;
                padding-top: 20px;
                .multiple-box {
                    height: 50px;
                    line-height: 50px;
                    padding-left: 19px;
                }
                .pagination-box {
                    height: 50px;
                    line-height: 50px;
                    background: #ffffff;
                    display: flex;
                    justify-content: center;
                    align-items:center;
                    padding-top: 25px;
                }
            }
            .banner-setting {
                position: relative;
                width: 100%;
                height: 800px;
                background: #ffffff;
                border: 1px solid #e4e7ed;
                border-top: none;
                padding: 20px;
                .upload-item {
                    padding-top:45px;
                    padding-bottom:100px;
                    .upload-text {
                        font-size: 12px;
                        color: #999999;
                        margin-left: 30px;
                    }
                }
                .btn-box {
                    text-align: center;
                }
            }
        }
        .doctorimg {
            width:100px;
            height: 60px;
            margin: auto;
            background-size: cover;
            background-position: center top;
        }
    }
</style>
